<template>
	<view v-show="!loading">
		<view class="word-content d-c">
			<view class="box1">
				<view class="word d-c fweib">
					<view class="text">{{word}}</view>
					<image :src="frequencyImages[frequency]" mode="widthFix"></image>
				</view>
				<view class="pronounce d-c">
					<view class="pronounce-box d-c">
						<text>美 {{baseData.us}}</text>
						<image src="/static/index1/10.png" mode="widthFix" @click="playAudio(baseData.us_url)"></image>
					</view>
					<view class="pronounce-box d-c">
						<text>英 {{baseData.en}}</text>
						<image src="/static/index1/10.png" mode="widthFix" @click="playAudio(baseData.en_url)"></image>
					</view>
				</view>
			</view>
			<view class="box2">
				<view class="box2-1 f32 d-c fweib">
					<image src="/static/index1/26.png" mode="widthFix"></image>
					<text>{{zkcs}}次</text>
				</view>
				<view class="box2-2 f32 d-c fweib">
					<image src="/static/index1/25.png" mode="widthFix"></image>
					<text>{{gkcs}}次</text>
				</view>
			</view>
		</view>

		<view class="word-info">
			<view class="box-list f26 d-c">
				<view class="btn" @click="tabIndex=index" :class="{active:tabIndex===index}"
					v-for="(item, index) in tabList" :key="index">{{item}}</view>
			</view>
			<view class="word-box">
				<!-- 释义 -->
				<view v-show="tabIndex==0">
					<view v-if="baseData.translation.length>0">
						<view class="box-item-title">释义</view>
						<view class="box-item-text" v-for="(text, textIndex) in baseData.translation" :key="textIndex">
							{{text}}</view>
					</view>
					<!-- 考频 -->
					<view v-if="baseData.exam.length>0">
						<view class="box-item-title mt30">考频</view>
						<view class="d-s-s" v-for="(exam, examIndex) in baseData.exam" :key="examIndex">
							<view class="box-item-text">{{exam.tag}}</view>
							<view class="ml20 flex-1">
								<view class="d-s-s">
									<view class="box-item-text">近六年共出现<text
											class="ml10 mr10 gray0">{{exam.appear_count}}</text>次</view>
									<view class="ml20 d-s-c">
										<text class="box-item-text mr10">重要程度</text>
										<u-rate v-model="exam.importance" :disabled="true" size="22"
											active-color="#ffbf00"></u-rate>
									</view>
								</view>
								<view v-if="exam.definition.length>0">
									<view class="d-s-c" :class="{'text-bold':progressIndex === 0}"
										v-for="(progress, progressIndex) in exam.definition" :key="progressIndex">
										<u-line-progress :percent="formatNumInt(progress.percentage)"
											active-color="#4BB0FF" :show-percent="false" height="20"
											style="width: 30%;"></u-line-progress>
										<text class="box-item-text ml10">{{progress.percentage}}</text>
										<text class="box-item-text ml20">{{progress.text}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 例句 -->
					<view v-if="baseData.sentence!=''">
						<view class="box-item-title mt30">例句</view>
						<view class="box-item-text" @click="playAudio(baseData.sentence_url)">
							<u-parse :html="baseData.sentence"></u-parse>
						</view>
					</view>
					<!-- 搭配 -->
					<view v-if="baseData.phraseList.length>0">
						<view class="box-item-title mt30">搭配</view>
						<view class="box-item-text" v-for="(phrase, phraseIndex) in baseData.phraseList"
							:key="phraseIndex">
							<text class="gray0">{{phrase.en}}</text>
							<text class="gray3 ml20">{{phrase.zh}}</text>
						</view>
					</view>
					<!-- 变形 -->
					<view v-if="baseData.transformList.length>0">
						<view class="box-item-title mt30">变形</view>
						<view class="box-item-text" v-for="(transform, transformIndex) in baseData.transformList"
							:key="transformIndex">
							<text class="gray3">{{transform.key}}</text>
							<text class="gray0 ml20">{{transform.name}}</text>
						</view>
					</view>
					<!-- 助记 -->
					<view v-if="baseData.memoList.length>0">
						<view class="box-item-title mt30">助记</view>
						<view class="d-s-c">
							<view class="d-c-c" v-for="(memo, memoIndex) in baseData.memoList" :key="memoIndex">
								<view class="box-item-text memo">
									<view>
										<text class="mr10" v-show="memo.left!=''">{{memo.left}}</text>
										<text>{{memo.word}}</text>
										<text class="ml10" v-show="memo.right!=''">{{memo.right}}</text>
									</view>
									<view class="mt10">{{memo.definition}}</view>
								</view>
								<view class="ml20 mr20" v-if="memoIndex+1<baseData.memoList.length">+</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 中考真题 -->
				<view v-show="tabIndex==1 && zkData.length>0">
					<view class="mb30 box-item" v-for="(zk, zkIndex) in zkData" @click.stop="popup(zk)" :key="zkIndex">
						<view class="d-s-s gray3 mb10">
							<text>{{zk.sentence.no}}</text>
							<u-parse class="cust-content" :html="zk.sentence.text"></u-parse>
						</view>
						<view class="mb10 ml20" v-if="zk.options.length>0">
							<view v-for="(zkoption, zkoptionIndex) in zk.options" :key="zkoptionIndex">
								<view class="gray3" v-for="(zkop, zkopIndex) in zkoption.list" :key="zkopIndex">
									<u-parse :html="zkop"></u-parse>
								</view>
							</view>
						</view>
						<view class="gray9">
							<u-parse :html="zk.source"></u-parse>
						</view>
					</view>
				</view>
				<!-- 高考真题 -->
				<view v-show="tabIndex==2 && gkData.length>0">
					<view class="mb30 box-item" v-for="(gk, gkIndex) in gkData" @click.stop="popup(gk)" :key="gkIndex">
						<view class="d-s-s gray3 mb10">
							<text>{{gk.sentence.no}}</text>
							<u-parse class="cust-content" :html="gk.sentence.text"></u-parse>
						</view>
						<view class="mb10 ml20" v-if="gk.options.length>0">
							<view v-for="(gkoption, gkoptionIndex) in gk.options" :key="gkoptionIndex">
								<view class="gray3" v-for="(gkop, gkopIndex) in gkoption.list" :key="gkopIndex">
									<u-parse :html="gkop"></u-parse>
								</view>
							</view>
						</view>
						<view class="gray9">
							<u-parse :html="gk.source"></u-parse>
						</view>
					</view>
				</view>
				<!-- 巧记 -->
				<view v-show="tabIndex==3">
					<view class="memory-section">
						<view class="memory-content" v-if="qjData">
							<view class="memory-part" v-for="(qiaoji, qjIndex) in qjData.memoList" :key="qjIndex">
								<view :class="`part-${qjIndex+1}`">
									<view class="letter">{{qiaoji.word}}</view>
									<view class="hint-text">{{qiaoji.definition}}</view>
								</view>
								<view class="ml10 mr10" v-if="qjIndex+1<qjData.memoList.length">+</view>
							</view>
							<view class="memory-content">
								<u-parse :html="qjData.memoChinese"></u-parse>
							</view>
						</view>
					</view>
				</view>
				<!-- 语法 -->
				<view v-show="tabIndex==4">

				</view>
			</view>
		</view>
		<u-popup v-model="showPopup" mode="center">
			<u-parse class="cust-pop cout-word" :html="popHtml && popHtml.sentence.text"></u-parse>
			<view class="mb10" v-if="popHtml && popHtml.options.length>0">
				<view v-for="(gkoption, gkoptionIndex) in popHtml.options" :key="gkoptionIndex">
					<view class="gray3" v-for="(gkop, gkopIndex) in gkoption.list" :key="gkopIndex">
						<u-parse class="p-0-20 f50" :html="gkop"></u-parse>
					</view>
				</view>
			</view>
			<view class="gray9">
				<u-parse class="cust-pop" :html="popHtml && popHtml.source"></u-parse>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popHtml: '',
				showPopup: false,
				loading: true,
				wordId: 0,
				word: '',
				frequency: 'base',
				frequencyImages: {
					'high': require('@/static/index1/33.png'),
					'middle': require('@/static/index1/34.png'),
					'low': require('@/static/index1/35.png'),
					'base': require('@/static/index1/36.png'),
				},
				zkcs: 0,
				gkcs: 0,
				tabIndex: 0,
				tabList: ['释义', '中考真题', '高考真题', '词组', '语法'],
				tabList: ['释义', '中考真题', '高考真题', '巧记', '语法'],
				baseData: {
					word: '',
					cn: '',
					en: '',
					en_url: '',
					us: '',
					us_url: '',
					translation: [],
					sentence: '',
					sentence_url: '',
					phraseList: [],
					transformList: [],
					memoList: [],
					exam: []
				},
				zkData: {},
				gkData: {},
				qjData: {
					memoList: [],
					memoChinese: '',
				},
			};
		},
		computed: {
			formatNumInt(val) {
				return (val) => {
					return parseInt(val);
				}
			},
		},
		onHide() {
			uni.setStorageSync('tabItem', `${this.tabIndex}`)
		},
		mounted() {
			let tabIndex = uni.getStorageSync('tabItem')
			if (tabIndex) {
				this.tabIndex = +tabIndex
			}
		},
		beforeDestroy() {
			uni.setStorageSync('tabItem', `${this.tabIndex}`)
		},
		onLoad(options) {
			let tabIndex = uni.getStorageSync('tabItem')
			if (tabIndex) {
				this.tabIndex = +tabIndex
			}
			if (!this.$store.state.isLogin) {
				uni.$u.toast('登录超时请重新登录')
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}, 1500)
				return false
			} else {
				this.wordId = options.wordId || 0
				this.getDetail()
			}
		},
		methods: {
			// 获取单词详情
			getDetail() {
				this.$u.post(this.$u.api.wordDetail, {
					wordId: this.wordId,
				}).then((res) => {
					console.log(res)
					this.loading = false
					this.word = res.data.word
					this.frequency = res.data.frequency
					let extend = res.data.word_extend
					this.zkcs = extend.zk_cs
					this.gkcs = extend.gk_cs
					this.baseData = extend.bd_json
					this.zkData = extend.zk_exam_question
					this.gkData = extend.gk_exam_question
					this.qjData = extend.qiaoji
				}).catch((err) => {
					console.log(err)
					uni.$u.toast(err.data.msg)
				})
			},
			// 发音
			playAudio(audio) {
				if (audio) {
					this.utils.playAudio(audio)
				}
			},
			popup(item) {
				console.log(JSON.parse(JSON.stringify(item)));
				this.showPopup = true
				this.popHtml = item
			}
		},
	}
</script>

<style lang="less" scoped>
	page {
		padding: 0 30rpx 30rpx;
		background: #EEFAFF;
	}



	.word-content {
		background-color: #fff;
		border-radius: 10rpx;
		margin-top: 20rpx;
		padding: 44rpx 20rpx;

		.box1 {
			margin-right: auto;
		}

		.word {
			font-size: 64rpx;

			image {
				width: 90rpx;
				margin-left: 10rpx;
			}
		}

		.pronounce {
			margin-top: 20rpx;

			.pronounce-box {
				margin-right: 46rpx;
				font-size: 20rpx;
				color: #999999;
			}

			image {
				width: 30rpx;
				margin-left: 10rpx;
			}
		}

		.box2 {
			.box2-1 {
				color: #058FFB;
			}

			.box2-2 {
				color: #FF6010;
			}

			image {
				width: 60rpx;
				margin-right: 10rpx;
			}
		}
	}

	.word-info {
		margin-top: 58rpx;

		.box-list {
			justify-content: space-between;

			.btn {
				line-height: 60rpx;
				color: #fff;
				border-radius: 14rpx 14rpx 0 0;
				padding: 0 28rpx;
				background: rgba(153, 153, 153, 0.5);
			}

			.active {
				background: #4BB0FF;
			}
		}
	}

	.word-box {
		width: 100%;
		min-height: 30vh;
		padding: 30rpx 20rpx;
		background-color: #FFFFFF;
		border-radius: 0 0 10rpx 10rpx;
		box-sizing: border-box;

		.box-item-title {
			font-size: 26rpx;
			color: #000000;
			font-weight: bold;
			margin-bottom: 16rpx;
		}

		.box-item-text {
			font-size: 24rpx;
			font-weight: 400;

			&:hover {
				font-weight: bold;
				cursor: pointer;
			}
		}

		.memo {
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
			border: 2rpx dashed #cccccc;
			box-sizing: border-box;
			text-align: center;
		}
	}

	.text-bold {
		.box-item-text {
			font-weight: bold;
		}
	}

	.box-item {
		&:hover {
			background-color: rgba(227, 224, 73, .4);
			cursor: pointer;
		}
	}

	.cust-pop {
		padding: 20rpx;
		font-size: 52rpx;
		line-height: 50rpx;
		// font-weight: bold;
	}

	/* 记忆法部分 */
	.memory-section {
		background: rgba(255, 255, 255, 0.9);
		border-radius: 15rpx;
		padding: 20rpx;
		margin-top: 20rpx;
		// box-shadow: 0 4rpx 15rpx rgba(0,0,0,0.08);
	}

	.memory-title {
		text-align: center;
		font-size: 96rpx;
		color: #6a11cb;
		margin-bottom: 20rpx;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
	}

	.memory-content {
		font-size: 34rpx;
		line-height: 1.8;
		text-align: center;
		margin: 25rpx 0;
	}

	.memory-part {
		display: inline-flex;
		flex-direction: row;
		align-items: center;
	}

	.letter {
		font-size: 48rpx;
		font-weight: bold;
		color: white;
		margin-bottom: 8rpx;
	}

	.hint-text {
		font-size: 26rpx;
		color: white;
		font-weight: 500;
	}


	.part-1 {
		background-color: #ff6b8b;
		color: white;
		padding: 15rpx 10rpx;
		border-radius: 8rpx;
		min-width: 80rpx;
	}

	.part-2 {
		background-color: #4cd964;
		color: white;
		padding: 15rpx 10rpx;
		border-radius: 8rpx;
		min-width: 80rpx;
	}

	.part-3 {
		background-color: #5ac8fa;
		color: white;
		padding: 15rpx 10rpx;
		border-radius: 8rpx;
		min-width: 80rpx;
	}
	.part-6 {
		background-color: #953dfa;
		color: white;
		padding: 15rpx 10rpx;
		border-radius: 8rpx;
		min-width: 80rpx;
	}
	.part-5 {
		background-color: #fa50f8;
		color: white;
		padding: 15rpx 10rpx;
		border-radius: 8rpx;
		min-width: 80rpx;
	}

	.part-4 {
		background-color: #ff9800;
		color: white;
		padding: 15rpx 10rpx;
		border-radius: 8rpx;
		min-width: 80rpx;
	}
</style>